<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main id="app">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{sex}}</p>
        <p>是否成年：{{isAudlt}}</p>
        <p>是否成年：{{isAudlt}}</p>
        <p>是否成年2：{{isAdultMethod()}}</p>
        <p>是否成年2：{{isAdultMethod()}}</p>
    </main>
</body>
<script src="../vue.min.js"></script>
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                name: "Hydra",
                age: 16,
                sex: "男"
            }
        },
        methods: {
            getName() {
            	// 使用vue对象.属性名，可以直接访问data里面的属性
            	// 这里使用this指向当前vue对象
            	return this.name;
            },
            isAdultMethod() {
				console.log("调用方法！")
            	return this.age >= 18 ? "是" : "否";
            },
        },
        // computed内部也定义函数，computed称为计算属性
        // 注意：虽然定义的是方法，但是模板与法中作为普通属性使用
        // 计算属性：与方法相比，虽然都可以调用逻辑，但是计算属性有结果缓存。
        // 如果结果依赖的底层数据没有发生改变，那么不会重新计算属性值，而是使用缓存值。
        // 计算属性的底层依赖数据只能来源于vue对象内部的属性（属性、计算属性、方法），
        // 如果来源于外部，外部的值发生改变也不会触发方法进行重新计算
        computed: {
            isAudlt() {
                console.log("调用计算属性！")
                return this.age >= 18 ? "是" : "否"
            },
        }
    })


</script>